<template>
  <view class="toolsForm" v-if="form">
    <view class="item" v-for="item of newForm.list" :key="item.id">
      <view class="label">
        <text class="ts" v-if="item.required == '1'">*</text>
        {{ item.name }}
      </view>

      <view class="tools">
        <view class="inp" v-if="item.type === 'text'">
          <input
            :disabled="disabled"
            v-model.trim="item.default"
            type="text"
            :placeholder="item.tip"
            @blur="(e) => changeBlur(e, item.id)"
          />
        </view>
        <view class="inp" v-if="item.type === 'textarea'">
          <textarea
            :disabled="disabled"
            v-model.trim="item.default"
            :placeholder="item.tip"
            @blur="(e) => changeBlur(e, item.id)"
          />
        </view>
        <view class="inp" v-if="item.type === 'time'">
          <picker
            :disabled="disabled"
            @change="(e) => changePicker(e, item.id)"
            :value="item.default"
            mode="time"
          >
            <view class="picker">
              <view>
                {{ item.default || item.tip }}
              </view>
              <text class="iconfont icon-arrow-right" v-if="!disabled"></text>
            </view>
          </picker>
        </view>
        <view class="inp" v-if="item.type === 'date'">
          <picker
            :disabled="disabled"
            @change="(e) => changePicker(e, item.id)"
            :value="item.default"
            mode="date"
          >
            <view class="picker">
              <view>
                {{ item.default || item.tip }}
              </view>
              <text class="iconfont icon-arrow-right" v-if="!disabled"></text>
            </view>
          </picker>
        </view>
        <view class="inp tr" v-if="item.type === 'uploadImg'">
          <toolsFile
            :disabled="disabled"
            :fileList="getFileList(item.default)"
            :max="1"
            @success="(e) => fileSuccess(e, item.id)"
            @remove="fileRemove(item.id)"
          ></toolsFile>
        </view>
        <view class="inp" v-if="item.type === 'radio'">
          <radio-group @change="(e) => changeGroup(e, item.id)" class="textRig">
            <label v-for="ce in item.default_list" :key="ce.name">
              <radio
                :value="ce.name"
                :checked="ce.checked"
                :disabled="disabled"
              />
              <text>{{ ce.name }}</text>
            </label>
          </radio-group>
        </view>
        <view class="inp" v-if="item.type === 'checkbox'">
          <checkbox-group
            @change="(e) => changeGroup(e, item.id)"
            class="textRig"
          >
            <label v-for="ce in item.default_list" :key="ce.name">
              <checkbox
                :value="ce.name"
                :checked="ce.checked"
                :disabled="disabled"
              />
              <text>{{ ce.name }}</text>
            </label>
          </checkbox-group>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import toolsFile from "@/components/tools/tools-file";

export default {
  components: {
    toolsFile
  },

  props: {
    disabled: {
      type: Boolean,
      default: false
    },

    form: {
      type: Object,
      default() {
        return {
          list: [],
          name: "",
          is_form: 1
        };
      }
    }
  },

  computed: {
    getFileList() {
      return (url) => {
        if (!url) return [];
        return [
          {
            url
          }
        ];
      };
    }
  },

  data() {
    return {
      newForm: {
        list: []
      }
    };
  },

  methods: {
    changeBlur(e, id) {
      let { value } = e.detail,
        item = this.newForm.list.find((el) => el.id === id);
      this.$nextTick(() => {
        this.$set(item, "default", value);
        this.changeValueCallBack();
      });
    },

    fileSuccess(value, id) {
      let item = this.newForm.list.find((el) => el.id === id);
      this.$nextTick(() => {
        this.$set(item, "default", value);
        this.changeValueCallBack();
      });
    },

    fileRemove(id) {
      let item = this.newForm.list.find((el) => el.id === id);
      this.$nextTick(() => {
        this.$set(item, "default", "");
        this.changeValueCallBack();
      });
    },

    changePicker(e, id) {
      let { value } = e.detail,
        item = this.newForm.list.find((el) => el.id === id);

      this.$nextTick(() => {
        this.$set(item, "default", value);
        this.changeValueCallBack();
      });
    },

    changeGroup(e, id) {
      let { value } = e.detail,
        item = this.newForm.list.find((el) => el.id === id);

      if (item.type === "radio") {
        this.$nextTick(() => {
          item.default = value;
          item.default_list.forEach((el) => {
            el.checked = false;
            if (el.name === value) {
              el.checked = true;
            }
          });

          this.changeValueCallBack();
        });
      } else {
        this.$nextTick(() => {
          item.default = value.join(",");
          item.default_list.forEach((el) => {
            if (value.indexOf(el.name) !== -1) {
              el.checked = true;
            } else {
              el.checked = false;
            }
          });

          this.changeValueCallBack();
        });
      }
    },

    changeValueCallBack() {
      this.$emit("update:form", this.newForm);
    }
  },

  options: { styleIsolation: "shared" },

  mounted() {
    this.newForm = JSON.parse(JSON.stringify(this.form));
  }
};
</script>

<style lang="scss" scoped>
.toolsForm {
  // .item {
  //   display: flex;
  // }

  .label {
    .ts {
      margin-right: 5rpx;
      color: #ff0000;
    }

    padding: 48rpx 0 24rpx;
    // margin-right: 10rpx;
    // height: 80rpx;
    // line-height: 80rpx;
    font-size: 30rpx;
  }
}

.tools {
  flex: 1;
  overflow: hidden;

  input,
  picker,
  .picker {
    line-height: 80rpx;
    height: 80rpx;
    box-sizing: border-box;
  }

  .icon-arrow-right {
    font-size: 24rpx;
    color: rgb(205, 205, 205);
  }

  input,
  picker,
  textarea {
    width: 100%;
    font-size: 30rpx;
    // text-align: right;
    background: #f8f8f8;
    border-radius: 10rpx;
    border: 2rpx solid #efefef;
    padding: 0 24rpx;
  }

  .picker {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 30rpx;
  }

  textarea {
    padding: 25rpx;
    height: 184rpx;
  }
}

.textRig {
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: flex-end;
  padding-top: 5rpx;

  label {
    display: flex;
    align-items: center;
    margin: 10rpx 0 0 10rpx;
  }
}

.tools {
  ::v-deep {
    // .list {
    //   justify-content: flex-end;
    //   padding-top: 20rpx;

    //   .listItem {
    //     width: 20%;
    //   }
    // }

    // .fileText {
    //   display: none;
    // }

    // .icon-add-select {
    //   font-size: 50rpx;
    // }

    .uni-radio-input {
      border-radius: 50%;
    }

    .uni-checkbox-input,
    .uni-radio-input {
      transform: scale(0.7);
    }

    uni-radio .uni-radio-input {
      margin-right: 0;
    }

    .uni-checkbox-input-checked,
    .uni-radio-input-checked {
      border-color: #f0250e !important;
      background: #f0250e !important;
      color: #fff !important;
    }

    // #ifdef MP-WEIXIN
    checkbox .wx-checkbox-input {
      color: #ffffff !important;
      transform: scale(0.7);
    }

    checkbox .wx-checkbox-input.wx-checkbox-input-checked,
    radio .wx-radio-input.wx-radio-input-checked {
      color: #fff;
      background: #f0250e;
      border-color: #f0250e !important;
    }

    radio .wx-radio-input {
      border-radius: 50% !important;
      color: #ffffff !important;
      transform: scale(0.7);
    }
    // #endif
  }
}

.readonly {
  padding: 20rpx 0 0;
  // text-align: right;
  // line-height: 80rpx;
  // height: 80rpx;
}
</style>
